import { Button, Card, List } from "antd";
import type { ClientInfo } from "./App";
import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined, PlusOutlined } from "@ant-design/icons";
import { getPortforwardApi, getToken } from "./utils/client";
import { useState } from "react";
import ForwardModal from "./components/ForwardModal";

export interface ForwardPanelProps {
    curClient?: ClientInfo;
    onChange: (clientInfo: ClientInfo) => void;
}

function ForwardPanel(props: ForwardPanelProps) {

    const [showAddModal, setShowAddModal] = useState(false);

    const closePortForward = async (forwardId: string) => {
        if (props.curClient == undefined) {
            return;
        }
        const tmpPfList = props.curClient.forwardList.filter(item => item.forwardId != forwardId);

        const api = getPortforwardApi();
        await api.portforwardClosePost({
            portforwardClosePostRequest: {
                token: getToken(),
                id: props.curClient.id,
                forwardId,
            },
        });
        props.onChange({
            ...props.curClient,
            forwardList: tmpPfList,
        });
    }

    return (
        <Card title="端口转发" style={{ height: "calc(50vh - 50px)", overflowY: "hidden" }} bodyStyle={{ height: "calc(50vh - 110px)", overflowY: "auto", padding: "0px 10px" }}
            extra={
                <Button type="text" style={{ minWidth: 0, padding: "0px 0px" }} onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    setShowAddModal(true);
                }} disabled={props.curClient == undefined}><PlusOutlined /></Button>
            }>
            {props.curClient !== undefined && (
                <List rowKey="forwardId" dataSource={props.curClient?.forwardList ?? []} renderItem={pfInfo => (
                    <List.Item>
                        <Card style={{ border: "none", width: "100%" }} bodyStyle={{ padding: "0px 0px" }}
                            headStyle={{ minHeight: 0, fontSize: "14px" }}
                            title={pfInfo.listen == "local" ? "服务器=>本地" : "本地=>服务器"}
                            extra={
                                <Button type="text" style={{ minWidth: 0, padding: "0px 0px" }} onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    closePortForward(pfInfo.forwardId ?? "");
                                }}><CloseOutlined /></Button>
                            }>
                            {pfInfo.listen == "local" && (
                                <div>
                                    <div>R:{pfInfo.remoteAddr}</div>
                                    <div><ArrowDownOutlined /></div>
                                    <div>L:{pfInfo.localAddr}</div>
                                </div>
                            )}
                            {pfInfo.listen == "remote" && (
                                <div>
                                    <div>R:{pfInfo.remoteAddr}</div>
                                    <div><ArrowUpOutlined /></div>
                                    <div>L:{pfInfo.localAddr}</div>
                                </div>

                            )}
                        </Card>
                    </List.Item>
                )} />
            )}
            {showAddModal == true && (
                <ForwardModal forwardClientId={props.curClient?.id ?? ""} onCancel={() => setShowAddModal(false)}
                    onOk={pfInfo => {
                        setShowAddModal(false);
                        if (props.curClient !== undefined) {
                            const tmpPfList = props.curClient.forwardList.slice();
                            tmpPfList.push(pfInfo);
                            props.onChange({
                                ...props.curClient,
                                forwardList: tmpPfList,
                            });
                        }
                    }} />
            )}
        </Card>
    );
}

export default ForwardPanel;